<template>
  <p>
    <input v-model.lazy="msg" />
  </p>
  <p>
    <select v-model="msg">
      <option value="apple">苹果</option>
      <option value="orange">橙子</option>
    </select>
  </p>
  <p>
    <textarea v-model="msg" />
  </p>
  <h2>
    {{ msg }}
  </h2>
  <p>
    <input v-model.number.trim="cardno" @keyup="show" />
  </p>
  <h2>卡号:{{ cardno }}</h2>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
export default {
  setup() {
    let msg = ref("");
    let cardno = ref("");
    function show() {
      console.log(typeof cardno.value, cardno);
    }
    return { msg, cardno, show };
  },
};
</script>
<style scoped>
#div1 {
  width: 300px;
  height: 100px;
  background: lightgoldenrodyellow;
  overflow: auto;
}

#div1 li {
  margin: 20px;
  background-color: aquamarine;
  height: 100px;
  width: 200px;
}
</style>
